<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.18.0.js"></script>


</head>
<body>

<div id="app">
    <el-container>
        <el-header style="font-size:40px;">
            -----------------------实验报告上传系统-----------------------
            <el-button type="info" size="mini" round @click="logout">退出登录</el-button>

        </el-header>

        <el-container>
            <el-aside width="200px">
                <!--左侧导航栏-->
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>Welcome</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="ToStuHome">个人主页</el-menu-item>
                            <el-menu-item index="1-2" @click="ToHomeworkForStu">查看作业项目</el-menu-item>
                            <el-menu-item index="1-2" @click="">选课</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-aside>
            <el-main>

                <!--表格-->
                <el-table :data="CourseTableData" border>

                    <el-table-column prop="cno" label="课程号" width="120">
                    </el-table-column>
                    <el-table-column prop="cname" label="课程名" width="120">
                    </el-table-column>
                    <el-table-column prop="maxNum" label="最大选课人数" width="120">
                    </el-table-column>
                    <el-table-column prop="curNum" label="已选人数" width="120">
                    </el-table-column>


                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                        <el-button type="primary"
                                   @click="selectByCno(scope.row.cno)"
                                   :disabled="scope.row.flag" >
                            {{scope.row.flag == false ? '选课' : '已选'}}
                        </el-button>

                            <el-button type="danger"
                                       @click="deselectByCno(scope.row.cno)"
                                       :disabled="!scope.row.flag" >
                                {{scope.row.flag == false ? '未选' : '退选'}}
                            </el-button>

                        </template>
                    </el-table-column>

                </el-table>
                <!-- Pagination分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="sizes,prev, pager,
                    next,jumper,total"
                        :total="total">
                </el-pagination>

            </el-main>
        </el-container>
    </el-container>

</div>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
</style>

</body>
</html>

<script>


    new Vue({
        el: "#app",
        data: {
            isSelect:'选课', // 选课按钮文字
            isClick: false,
            CourseTableData:[{
                cno:'10087',
                cname:'面向对象系统设计与分析',
                maxNum:'100',
                curNum:'5'

            }],
            total:1000,
            page: 1,
            pageSize: 10,

        },
        methods: {
            deselectByCno(cno){
                axios.delete("/sc/"+cno).then(res=>{
                    if (res.data.code === 1) {
                        setTimeout(this.selectCourse,100);
                        this.$message.success(res.data.msg || '操作成功')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }

                })
            },
            selectByCno(cno){
                axios.post("/sc?cno="+cno).then(res=>{
                    if (res.data.code === 1) {
                        setTimeout(this.selectCourse,100);
                        this.$message.success(res.data.msg || '操作成功')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                })

            },
            selectHomeWorkByPage() {
                axios.get("/homeworks/forStudentPage?page="+ this.page+"&pageSize="+this.pageSize).then(res=>{
                    if(res.data.code!=1){
                        this.$message.error(res.data.msg || '操作失败')
                    } else{
                        this.total=res.data.data.total;
                        this.homeworkTableData=res.data.data.rows;
                    }

                })
            },
            selectByCondition(){
                axios.get("/homeworks/forStudentPage?page="+ this.page+"&pageSize="+this.pageSize+
                "&courseId="+this.searchForm.courseId+"&name="+this.searchForm.name
                ).then(res=>{
                    if(res.data.code!=1){
                        this.$message.error(res.data.msg || '操作失败')
                    } else{
                        this.total=res.data.data.total;
                        this.homeworkTableData=res.data.data.rows;
                    }

                })
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.selectHomeWorkByPage();
            },
            handleCurrentChange(val) {
                this.page=val;
                this.selectHomeWorkByPage();
            },
            logout(){
                axios.get("/logout").then(res=>{
                    if (res.data.code === 1) {
                        localStorage.removeItem("user");
                        window.location.href = 'login.html';
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }

                })
            },

            ToStuHome() {
                window.location.href = 'stuHome.html';
            },
            ToHomeworkForStu(){
                window.location.href = 'homeworkForStu.html';
            },
            selectCourse() {
                axios.get("/course/CourseIsSelect").then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                    } else {
                        this.CourseTableData = res.data.data;
                    }

                })
            }
        },
        mounted() {
            if(localStorage.getItem("user")==null){
                window.location.href='login.html';
            }
            this.selectCourse();
        }
    })
</script>